<template>
  <div class="GykjMap-drainPort clear">
    <div class="GykjMap-drainPort-info pull-left">
      <table border class="table">
        <tbody>
          <tr>
            <td class="key">编码</td>
            <td>{{fliterData('pntcode')}}</td>
          </tr>
          <tr>
            <td class="key">名称</td>
            <td>{{fliterData('pntplace')}}</td>
          </tr>
          <tr>
            <td class="key">点类型</td>
            <td>{{fliterType('pnttype')}}</td>
          </tr>
          <tr>
            <td class="key">地理位置</td>
            <td>{{fliterData('pntplace')}}</td>
          </tr>
          <tr>
            <td class="key">建档人</td>
            <td>{{fliterData('buildman')}}</td>
          </tr>
          <tr>
            <td class="key">建档日期</td>
            <td>{{fliterData('builddate')}}</td>
          </tr>
          <tr>
            <td class="key">排水口尺寸</td>
            <td>{{fliterData('trnsieze')}}</td>
          </tr>
          <tr>
            <td class="key">排水口管底高程（m）</td>
            <td>{{fliterData('trnheight')}}</td>
          </tr>
          <tr>
            <td class="key">排水类别</td>
            <td>{{fliterData('trntype')}}</td>
          </tr>
          <tr>
            <td class="key">排水来源</td>
            <td>{{fliterData('trnsource')}}</td>
          </tr>
          <tr>
            <td class="key">排水量</td>
            <td>{{fliterData('trntonnage')}}</td>
          </tr>
          <tr>
            <td class="key">岸别</td>
            <td>{{fliterData('pntdir')}}</td>
          </tr>
          <!-- <tr>
            <td class="key">采集人</td>
            <td>{{fliterData('colman')}}</td>
          </tr>
          <tr>
            <td class="key">采集日期</td>
            <td>{{fliterData('haspics')}}</td>
          </tr> -->
          <tr>
            <td class="key">丢弃</td>
            <td>{{fliterData('noused')}}</td>
          </tr>
          <tr>
            <td class="key">点备注</td>
            <td>{{fliterData('pntcomment')}}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="GykjMap-drainPort-img pull-left">
      <img
        v-if="resultData.zoomimgpath"
        :src="`http://183.238.82.210:8090/ztwater/fileupdown.viewzoomimage.d?picname=${resultData.zoomimgpath}`"
        @dblclick="scaleImg" />
      <div v-else class="GykjMap-drainPort-noPicture"></div>
    </div>

    <transition name="animate-mask">
      <div
        v-show="isScaleImg"
        class="GykjMap-building-scaleImg"
        @click="closeScaleImg">
        <div class="close" @click.stop="closeScaleImg">
          <Icon type="close-round" size="30"></Icon>
        </div>
        <div class="img" @click.stop>
          <img :src="`http://183.238.82.210:8090/ztGykjMap-buildingreg/photo/${resultData.filename}`" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      isScaleImg: false
    }
  },
  methods: {
    scaleImg () {
      this.isScaleImg = true
    },
    closeScaleImg () {
      this.isScaleImg = false
    },
    fliterType (key) {
      return this.resultData[key] === '0101' ? '排水口' : this.resultData[key] === '0201' ? '取水口' : '--'
    },
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    initData (data = {}) {
      this.resultData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-drainPort {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .GykjMap-drainPort-info {
    width: 50%;
    height: 100%;
    padding: 5px;
    user-select: text;
    > .table {
      width: 100%;
      tr {
        > td {
          padding: 4px;
          &.key {
            width: 125px;
          }
        }
      }
    }
  }
  .GykjMap-drainPort-img {
    width: 50%;
    height: 100%;
    padding: 5px 0;
    text-align: center;
    > img {
      max-width: 100%;
      height: 100%;
    }
    > .GykjMap-drainPort-noPicture {
      width: 100%;
      height: 100%;
      text-align: center;
      background-image: url("./img/noPicture.png");
      background-position: center 35%;
      background-repeat: no-repeat;
    }
  }
  .GykjMap-building-scaleImg {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    > .close {
      position: absolute;
      right: 50px;
      top: 50px;
      color: white;
      cursor: pointer;
      &:hover {
        color: #ddd;
      }
    }
    > .img {
      width: 80%;
      height: 80%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      > img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
